<template>
    <view class="container" :style="themeColor">
        <view class="card-list card-list-img" @click="goUrl('/pages_me/packet/setting/profile')">
            <view class="label">
                <image class="avatar-img" mode="aspectFill" :src="easyGetUserImgUrl(userInfo.HeadPortrait)"></image>
                <view>
                    <text class="user-name text-show-line-2">{{ userInfo.NickName }}</text>
                    <text class="user-location">会员号：{{ userInfo.CardNumber }}</text>
                </view>
            </view>
            <uni-icons class="icon" type="arrowright"></uni-icons>
            <view class="line"></view>
        </view>
        <view class="card-list" @click="goUrl('/pages_me/packet/address/index')"
            v-if="getAppSet().userCenterMenu.address">
            <view class="labelName">收货地址</view>
            <uni-icons class="icon" type="arrowright"></uni-icons>
            <view class="line"></view>
        </view>
        <view class="card-list" @click="goUrl('/pages_me/packet/setting/changePwd')">
            <view class="labelName">登录密码设置</view>
            <uni-icons class="icon" type="arrowright"></uni-icons>
            <view class="line"></view>
        </view>
        <view class="card-list" v-if="showTraderPwd" @click="handleTraderPWdSet()">
            <view class="labelName">交易密码设置</view>
            <uni-icons class="icon" type="arrowright"></uni-icons>
            <view class="line"></view>
        </view>
        <view class="card-list" v-if="openInvoice" @click="goUrl('/pages_me/packet/billing/creatBilling?type=info')">
            <view class="labelName">开票信息</view>
            <uni-icons class="icon" type="arrowright"></uni-icons>
            <view class="line"></view>
        </view>
        <view class="card-list" v-if="isMainAccount" @click="goUrl('/pages_me/packet/sub-account/sub-account')">
            <view class="labelName">子账号管理</view>
            <uni-icons class="icon" type="arrowright"></uni-icons>
            <view class="line"></view>
        </view>
        <view class="card-list" @click="clearCache">
            <view class="labelName">清除缓存</view>
            <uni-icons class="icon" type="arrowright"></uni-icons>
            <view class="line"></view>
        </view>
        <view class="card-list" v-if="getAppSet().agreement" @click="agreement()">
            <view class="labelName">用户协议</view>
            <uni-icons class="icon" type="arrowright"></uni-icons>
            <view class="line"></view>
        </view>
        <view class="card-list" v-if="getAppSet().agreement" @click="privacy()">
            <view class="labelName">隐私政策</view>
            <uni-icons class="icon" type="arrowright"></uni-icons>
            <view class="line"></view>
        </view>
        <!-- #ifdef APP -->
        <view class="card-list" @click="zhuxiao()">
            <view class="labelName">注销账号</view>
            <uni-icons class="icon" type="arrowright"></uni-icons>
            <view class="line"></view>
        </view>
        <view class="card-list" @click="checkVersion">
            <view class="labelName">检查版本</view>
            <view class="flex">
                <view class="num">{{ getVersion() }}</view>
                <uni-icons class="icon" type="arrowright"></uni-icons>
            </view>
            <view class="line"></view>
        </view>
        <!-- #endif -->
        <view class="card-cell-li" v-if="cutList.length > 0" @click="cutAccountFn()">切换账号</view>
        <view class="card-cell-li" @click="logout">退出登录</view>
        <view class="card-group" v-if="false">
            <card-group-cell label="退出登录" @click.native="logout"></card-group-cell>
        </view>
        <uni-popup ref="popLogout" type="bottom" background-color="#fff" :safe-area="false">
            <view class="bottom-pop">
                <text class="title">确认退出当前账户?</text>
                <view class="actions">
                    <button class="btn btn-gray" @click="cancelLogout">取消</button>
                    <button class="btn btn-danger-hollow" @click="doLogout">退出</button>
                </view>
            </view>
        </uni-popup>
        <app-version ref="appVersion" :isAutoCheck="false" :appId="getAppId()"></app-version>
    </view>
</template>

<script>
import { mapMutations, mapState } from "vuex"
import {
    GetMemberDetail,
    SubmitMemberDetail,
    GetUserLoginList,
    SwitchUserLogin,
    IsSetPayPassword,
    IsMainAccount,
} from "@/service/api/member.js"
import { uploadImage } from "@/service/api/file.js"
import { getUserInfo, getProductDisplay } from "@/utils/appInit.js"
import { getUserCarList } from "@/utils/cartUtil.js"
import cardGroupCell from "@/components/common/cell/card-group-cell.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import appVersion from "@/uni-sub-base/module/version/app-version.vue"
import { GetIsOpenInvoice } from "@/service/api/order.js"
export default {
    components: {
        cardGroupCell,
        appVersion,
    },
    data() {
        return {
            userInfo: null,
            openInvoice: false,
            cutList: [],
            isMainAccount: false,
        }
    },
    computed: {
        showTraderPwd() {
            const { NeedBalancePayPassword } = storage.getCache("webInfo")
            return NeedBalancePayPassword
        },
    },
    mounted() {
        this.getIsOpenInvoice()
    },
    onLoad() {
        this.judgeIsMainAccount()
    },
    onShow() {
        this.userInfo = storage.getCache("userInfo")
    },
    methods: {
        ...mapMutations(["SET_AUTH"]),
        //进入页面
        goUrl(url) {
            this.easyGoTo(url)
        },
        async judgeIsMainAccount() {
            const res = await IsMainAccount()
            // Data = 1是主账号，0不是主账号
            this.isMainAccount = res.Data == 1
        },
        getIsOpenInvoice() {
            GetIsOpenInvoice().then((res) => {
                if (res.State == 1) {
                    this.openInvoice = res.Data == 1 ? true : false
                }
            })
        },
        cutAccountFn() {
            this.$refs.popCheckCut.openPop()
        },
        selected(item) {
            this.loginByAccount(item)
        },
        loginByAccount(item) {
            uni.showLoading({
                title: "切换中",
            })
            let path = "?userId=" + item.UserId
            SwitchUserLogin(path).then((res) => {
                if (res.State == 1 && res.Data) {
                    this.goHome(res.Data.Token)
                } else {
                    uni.hideLoading()
                    this.easyToast(res.Msg)
                }
            })
        },
        goHome(token) {
            this.SET_AUTH(token)
            setTimeout((e) => {
                this.getUserInfo()
            }, 2500)
            getUserCarList()
            getProductDisplay().then((res) => { })
        },
        getUserInfo() {
            let url = "/pages/index/index"
            getUserInfo().then((res) => {
                uni.hideLoading()
                uni.reLaunch({
                    url: url,
                })
            })
        },
        //清除缓存
        clearCache() {
            this.easyToast("清除成功")
        },
        agreement() {
            // this.easyGoTo("/pages/web/h5?url=" + encodeURIComponent(this.getAppSet().agreementUrl))
            this.easyGoTo("/pages/web/agreement?type=4")
        },
        privacy() {
            // this.easyGoTo("/pages/web/h5?url=" + encodeURIComponent(this.getAppSet().privacyUrl))
            this.easyGoTo("/pages/web/agreement?type=5")
        },
        //退出登录
        logout() {
            this.$refs.popLogout.open()
        },
        //退出登录
        cancelLogout() {
            this.closePop()
        },
        //退出登录
        doLogout() {
            this.closePop()
            this.SET_AUTH("")
            this.setOffEventForCart()
            storage.removeCache("token")
            storage.removeCache("userInfo")
            storage.removeCache("productDisplay")
            if (this.getAppSet().h5TokenLogin) {
                setTimeout((e) => {
                    uni.reLaunch({
                        url: "/pages/login/index",
                    })
                }, 500)
            } else {
                this.SET_THEME_COLOR("")
                storage.removeCache("webInfo")
                // storage.removeCache('selectShop')
                storage.removeCache("themeColor")
                setTimeout((e) => {
                    uni.reLaunch({
                        url: "/pages/login/loading",
                    })
                }, 500)
            }

        },
        //关闭提示弹窗
        closePop() {
            this.$refs.popLogout.close()
        },
        getVersion() {
            //#ifdef APP-PLUS
            let ver = plus.runtime.version

            return ver
            //#endif
            return ""
        },
        checkVersion() {
            this.$refs.appVersion.checkVersion()
        },
        zhuxiao() {
            uni.showModal({
                title: "提示",
                content: '提交成功，72小时内将为您注销此账号！届时您将收到注销成功通知！',
                showCancel: false,
            })
        },
        async handleTraderPWdSet() {
            const res = await IsSetPayPassword()
            this.goUrl(`/pages_me/packet/setting/changeDealPwd?isSetPwd=${res.Data}`)
        },
    },
}
</script>

<style lang="scss">
.container {

    // padding: $app-page-padding;
    .card-group-cell .image {
        width: 90rpx;
        height: 90rpx;
        border-radius: 90rpx;
    }

    .card-group-cell {
        .uni-icons {
            color: #ccc;
        }

        text,
        .label,
        .input {
            font-size: 28rpx;
        }
    }
}

.card-group {
    margin-bottom: 20rpx;
    background: $color-white;
    border-radius: $border-radius-10;
}

.btn {
    margin-top: 40rpx;
    height: 88rpx;
    font-size: 36rpx;
}

.bottom-pop {
    background: $color-white;
    padding: $app-page-padding;
    border-radius: $border-radius-30 $border-radius-30 0 0;

    .title {
        margin-top: 20rpx;
        display: flex;
        justify-content: center;
        margin-bottom: 20rpx;
        font-size: $font-size-28;
        font-weight: 600;
    }

    .actions {
        display: flex;
        flex-direction: row;
        margin-bottom: 48rpx;

        .btn {
            width: 220rpx;
        }
    }
}

.card-list {
    height: 112rpx;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 32rpx;
    padding-right: 24rpx;
    position: relative;
    overflow: hidden;

    .line {
        width: 750rpx;
        height: 1rpx;
        background: $uni-border-bottom-color;
        // background: red;
        position: absolute;
        bottom: 1rpx;
        left: 34rpx;
    }

    .labelName {
        font-size: 32rpx;
        color: #333333;
    }

    .flex {
        display: flex;
        align-items: center;

        .num {
            padding-right: 12rpx;
        }
    }
}

.card-list-img {
    height: 176rpx;

    .label {
        display: flex;
        align-items: center;

        view {
            display: flex;
            flex-direction: column;

            .user-name {
                font-size: 32rpx;
                color: #333333;
                padding-bottom: 10rpx;
                width: 500rpx;
            }

            .user-location {
                font-size: 24rpx;
                color: #333333;
            }
        }
    }

    .avatar-img {
        width: 112rpx;
        height: 112rpx;
        border: 2rpx solid #ffffff;
        border-radius: 50%;
        margin-right: 12rpx;
        flex-shrink: 0;
    }
}

.card-cell-li {
    margin-top: 24rpx;
    height: 112rpx;
    line-height: 112rpx;
    text-align: center;
    background: #fff;
}
</style>
